<template>
  <view class="category-container">
    <!-- 左侧分类菜单 -->
    <scroll-view class="left-menu" scroll-y>
      <view 
        class="menu-item"
        v-for="(item, index) in categories"
        :key="index"
        :class="{active: currentIndex === index}"
        @click="changeCategory(index)"
      >
        {{item.name}}
      </view>
    </scroll-view>
    
    <!-- 右侧商品列表 -->
    <scroll-view class="right-content" scroll-y>
      <view class="subcategory" v-for="(sub, i) in subCategories" :key="i">
        <view class="sub-title">{{sub.name}}</view>
        <view class="goods-list">
          <view 
            class="goods-item" 
            v-for="(goods, j) in sub.goodsList" 
            :key="j"
            @click="goGoodsDetail(goods)"
          >
            <image :src="goods.image" mode="aspectFit"></image>
            <text class="goods-name">{{goods.name}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      categories: [
        {name: '手机数码'},
        {name: '家用电器'},
        {name: '电脑办公'},
        {name: '美妆护肤'},
        {name: '食品生鲜'},
        {name: '母婴玩具'},
        {name: '服饰鞋包'},
        {name: '运动户外'},
        {name: '家居家装'},
        {name: '图书音像'}
      ],
      subCategories: [
        {
          name: '热门推荐',
          goodsList: [
            {name: 'iPhone 13', image: '/static/goods1.jpg'},
            {name: '华为Mate 50', image: '/static/goods2.jpg'},
            {name: '小米12', image: '/static/goods3.jpg'},
            {name: 'OPPO Find X5', image: '/static/goods4.jpg'},
            {name: 'vivo X80', image: '/static/goods5.jpg'}
          ]
        },
        {
          name: '手机配件',
          goodsList: [
            {name: '手机壳', image: '/static/goods6.jpg'},
            {name: '充电器', image: '/static/goods7.jpg'},
            {name: '数据线', image: '/static/goods8.jpg'},
            {name: '耳机', image: '/static/goods9.jpg'},
            {name: '移动电源', image: '/static/goods10.jpg'}
          ]
        }
      ]
    }
  },
  methods: {
    changeCategory(index) {
      this.currentIndex = index
      // 实际项目中这里应该请求对应分类的数据
      // 这里模拟数据变化
      this.subCategories = [
        {
          name: '热门推荐',
          goodsList: [
            {name: `商品${index+1}-1`, image: '/static/goods1.jpg'},
            {name: `商品${index+1}-2`, image: '/static/goods2.jpg'},
            {name: `商品${index+1}-3`, image: '/static/goods3.jpg'},
            {name: `商品${index+1}-4`, image: '/static/goods4.jpg'},
            {name: `商品${index+1}-5`, image: '/static/goods5.jpg'}
          ]
        },
        {
          name: '配件推荐',
          goodsList: [
            {name: `配件${index+1}-1`, image: '/static/goods6.jpg'},
            {name: `配件${index+1}-2`, image: '/static/goods7.jpg'},
            {name: `配件${index+1}-3`, image: '/static/goods8.jpg'},
            {name: `配件${index+1}-4`, image: '/static/goods9.jpg'},
            {name: `配件${index+1}-5`, image: '/static/goods10.jpg'}
          ]
        }
      ]
    },
    goGoodsDetail(goods) {
      uni.navigateTo({
        url: '/pages/goods/detail?id=' + goods.id
      })
    }
  }
}
</script>

<style>
.category-container {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 200rpx;
  background-color: #f7f7f7;
}
.menu-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  border-left: 6rpx solid transparent;
}
.menu-item.active {
  color: #ff2d4a;
  background-color: #fff;
  border-left-color: #ff2d4a;
  font-weight: bold;
}
.right-content {
  flex: 1;
  padding: 20rpx;
}
.sub-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin: 20rpx 0;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
}
.goods-item {
  width: 33.33%;
  text-align: center;
  margin-bottom: 20rpx;
}
.goods-item image {
  width: 120rpx;
  height: 120rpx;
}
.goods-name {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
</style>